import React, { useState } from 'react';
import { Modal, Divider,Form, Input, message } from 'antd';
import http from '../../../service/http.js'
import { GetUserName } from '../../../common/auth';
export default function Safe_Set() {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [oneUser,setOneUser]=useState({})
  const [passwordForm]=Form.useForm()
  React.useEffect(()=>{
    http.getUser({username:GetUserName()}).then((res)=>{
      let password1=res.data.password
      let password2=res.data.password
      passwordForm.setFieldsValue({password1,password2})
      setOneUser(res.data)
    })
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])
  const ok = async()=>{
    const fieldsValue=await passwordForm.validateFields()
    if(fieldsValue.password1===fieldsValue.password2){
      let data = {...oneUser,password:fieldsValue.password1}
      http.saveUser(data).then((res)=>{
        message.success('修改成功')
        setIsModalVisible(false)
      })
    }
    else{
      message.info('两次密码输入结果不同')
    }
  }
  return (
    <div style={{margin:' 0 10px'}}>
      <h2 style={{marginBottom:'20px'}}>安全设置</h2>
      <div>
        账户密码
        <span onClick={()=>{setIsModalVisible(true)}} style={{float:'right',color:'#177bd0',marginRight:'10px',cursor:'pointer'}}>修改</span>
      </div>
      <div style={{color:'#8c8c8c'}}>当前密码强度：强</div>
      <Divider style={{margin:'20px 0'}}/>
      <div>
        密保手机
        <span style={{float:'right',color:'#177bd0',marginRight:'10px',cursor:'pointer'}}>修改</span>
      </div>
      <div style={{color:'#8c8c8c'}}>已绑定手机：{GetUserName().slice(0,3)+"****"+GetUserName().slice(7,11)}</div>
      <Divider style={{margin:'20px 0'}}/>
      <div>
        备用邮箱
        <span style={{float:'right',color:'#177bd0',marginRight:'10px',cursor:'pointer'}}>修改</span>
      </div>
      <div style={{color:'#8c8c8c'}}>已绑定邮箱：1230***@qq.com</div>
      <Divider style={{margin:'20px 0'}}/>
      <Modal 
        title="修改密码" 
        visible={isModalVisible}
        okText='修改'
        cancelText='取消'
        onOk={ok} 
        onCancel={()=>{setIsModalVisible(false)}}>
        <Form
          name="basic"
          form={passwordForm}
        >
          <Form.Item
            label="输入密码"
            name="password1"
            rules={[
              {
                pattern:/^\w+$/,
                message: '请输入数字字母下划线!',
              },
              {
                required: true,
                message: '请输入你想设置的密码!',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          
          <Form.Item
            label="确认密码"
            name="password2"
            rules={[
              {
                pattern:/^\w+$/,
                message: '请输入数字字母下划线!',
              },
              {
                required: true,
                message: '请再次确认你设置的密码!',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}